@import "mixin/mixin";

//定义边框样式
.border-1px {
  @include border-1px(#000);
}
.border-top-1px {
  @include border-top-1px(rgb(255,222,122));
}

.border-bottom-1px {
  @include border-bottom-1px(rgb(255,222,122));
}

.border-left-1px {
  @include border-left-1px(rgb(255,222,122));
}

.border-right-1px {
  @include border-right-1px(rgb(255,222,122));
}

//媒体查询
@media (-webkit-min-device-pixel-ratio:1.5),(min-device-pixel-ratio:1.5) {
  .border-1px {
    &::after {
      transform: scale(0.7, 0.7);
      transform-origin: 0 0;
    }
  }
  .border-bottom-1px, .border-top-1px {
    &::after {
      transform: scaleY(0.7);
      transform-origin: left bottom;
    }
  }
  .border-left-1px, .border-right-1px {
    transform: scaleX(0.7);
    transform-origin: right top;
  }
}

//-webkit-min-device-pixel-ratio 有多个值，可以根据项目需求定义更多的值来适配不同的机型，详细请查看本文最后的参考
@media (-webkit-min-device-pixel-ratio:2),(min-device-pixel-ratio:2) {
  .border-1px {
    &::after {
      transform:scale(0.5, 0.5);
      transform-origin: 0 0;
    }
  }
  .border-bottom-1px, .border-top-1px {
    &::after {
      transform: scaleY(0.5);
      transform-origin: left bottom;
    }
  }
  .border-left-1px, .border-right-1px {
    transform: scaleX(0.5);
    transform-origin: right top;
  }
}
